<template>
    <!-- 所有内容的容器 -->
    <view class="container" v-if="dataList">
        <view class="headZh">
            <view class="banner">
                <image mode="widthFix" :src="iconUrl+'app-banner.png'"></image>
            </view>
            <view class="search">
                <u-search @search="search" v-model="searchVal" placeholder="请输入搜索内容" bg-color="white"
                          height="60"
                          :clearabled="true" shape="round"
                          :show-action="false"></u-search>
            </view>
        </view>
        <view class="blank">
            <div></div>
        </view>

        <view class="content" @click="detail(item.id)" v-for="item in dataList" :key="item.id">
            <view class="blueBar"></view>
            <view class="info">
                <view class="top">
                    <view class="title">
                        <div>{{item.projectName}}</div>
                    </view>
                    <view class="price">
                        <text>{{item.positionSalary}}</text>
                        <text style="font-size:24rpx;color:black">/{{item.salaryUnit}}</text>
                    </view>
                </view>
                <view class="tag">

                    <u-tag :text="item.sex" v-if="item.sex !== ''" type="info" bg-color="#F5F5F5"
                           border-color="#F5F5F5"
                           mode="light" size="mini"/>
                    <u-tag :text="item.age" v-if="item.age !== ''" type="info" bg-color="#F5F5F5"
                           border-color="#F5F5F5"
                           mode="light" size="mini"/>
                    <u-tag :text="item.education" v-if="item.education !== ''" type="info" bg-color="#F5F5F5"
                           border-color="#F5F5F5" mode="light" size="mini"/>
                </view>
                <view class="company">
                    <view style="margin-top:7rpx;">
                        <image mode="heightFix" :src="iconUrl+'工具箱.png'"></image>
                    </view>
                    <view>
                        <text style="font-size:26rpx;">{{item.corpName}}</text>
                    </view>
                </view>
            </view>
        </view>
        <u-divider v-if="status === 'noMore'" bg-color="#F1F1F1" fontSize="20" border-color="#D1CECE" color="#D1CECE">您触及到我的底线了~
        </u-divider>
        <view class="bottom"></view>
        <uni-load-more :status="status" :content-text="contentText" />
        <u-tabbar v-model="current" :list="tarBarList" :mid-button="merType !== '1'"></u-tabbar>


    </view>
</template>

<script>
    import tabBar from '@/static/js/tabBar.js';
    import uniLoadMore from '@/wxcomponents/uni-app/uni-load-more/uni-load-more';
    export default {
        components:{
            uniLoadMore
        } ,
        data() {
            return {
                sexOptions: [],
                educationOptions: [],
                iconUrl: this.iconUrl,
                searchVal: '',
                dataList: [],
                tarBarList: [],
                current: 1,
                merType: '1',
                status: "",
                pageNumber: 1,
                pageSize: 10,
                isEnd: false
            }
        },
        onLoad() {
            this.$getDictList('sex', {
                success: (cts) => {
                    this.sexOptions = cts.data;
                }
            });
            this.$getDictList('education', {
                success: (cts) => {
                    this.educationOptions = cts.data;
                }
            });
            this.tarBarList = tabBar.getBarList(this.merType, this.iconUrl);
        },
        //进入页面调用
        onShow() {
            this.restPage();
            this.getList(false);
        },
        //上拉分页展示
        onReachBottom(){
            this.pageNumber = this.pageNumber + 1;
            if(this.isEnd){
                return;
            }
            this.getList(true);
        },
        //监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
        onPullDownRefresh() {
            this.restPage();
            //停止下拉刷新动画
            setTimeout(function () {uni.stopPullDownRefresh();  }, 500);
            this.getList(false);

        },
        methods: {
            search(){
                this.restPage()
                this.getList(false);
            },
            restPage(){
                this.pageNumber = 1;
                this.status = '';
                this.isEnd = false;
            },
            getList(pageFlag) {
                this.$sendRequest({
                    url: '/api/wx/getProjectList',
                    method: 'POST',
                    data: {
                        projectName: this.searchVal,
                        pageNumber: this.pageNumber,
                        pageSize: this.pageSize
                    },
                    success: (cts) => {
                        let dataRecord = cts.data.records;
                        dataRecord.forEach(item => {
                            item.sex = this.$selectDictLabel(this.sexOptions, item.sex)
                            item.education = this.$selectDictLabel(this.educationOptions, item.education)
                        });
                        if(pageFlag){
                            this.dataList = this.dataList.concat(dataRecord);
                        }else{
                            this.dataList = dataRecord;
                        }
                        if(dataRecord.length < this.pageSize){
                            this.isEnd=true;
                            this.status="noMore";
                        }
                    }
                });
            },
            detail(id) {
                uni.navigateTo({
                    url: 'detail?id=' + id
                })
            }
        }
    }
</script>

<style lang="scss">
    page {
        height: 100%;
    }

    .container {
        display: flex;
        flex-direction: column;
    }

    .headZh {
        position: relative;
    }

    .banner image {
        width: 750rpx;
        height: 350rpx;

    }

    .search {
        width: 655rpx;
        margin-left: 50rpx;
        position: absolute;
        top: 320rpx;
    }

    .searchInputClass {
        font-size: 24rpx;
        font-weight: 500;
        color: #9F9F9F;
        width: 600rpx;
    }

    .blank div {
        display: block;
        height: 60rpx;
    }

    .bottom {
        display: block;
        height: 10rpx;
        margin-bottom: 10rpx;
    }

    .content {
        display: flex;
        margin-left: 36rpx;
        margin-bottom: 30rpx;

    }

    .content .blueBar {
        display: flex;
        flex-direction: column;
        margin-top: 28rpx;
        width: 15rpx;
        height: 160rpx;
        border-radius: 20rpx;
        background-color: #1885FF;

    }

    .content .info {
        display: flex;
        flex-direction: column;
        margin-left: -6rpx;
        margin-right: 30rpx;
        display: flex;
        width: 700rpx;
        height: 220rpx;
        border-radius: 20rpx;
        background-color: #FFFFFF;
        padding: 20rpx;
    }

    .content .top {
        margin: 12rpx 0px;
        display: flex;
        font-size: 36rpx;
        justify-content: space-between;
    }

    .content .top .title text {
        font-size: 36rpx;
    }

    .content .top .price {
        font-size: 40rpx;
        color: #258CFF;
    }

    .content .top .price text {
        font-size: 40rpx;
    }

    .content .info .tag {
        display: flex;
        flex-wrap: wrap;
    }

    .content .info u-tag {
        margin-right: 10rpx;
        flex-direction: row;
    }

    .content .info .company {
        display: flex;
        margin-top: 20rpx;
        justify-content: flex-start;
    }

    .content .info image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
    }

</style>
